<template>
    <div id="Home">
        <head-top head-title="VMS" go-back="true" set-more="true" @actionSheet="actionSheet"></head-top>
        <scroller style="top:50px;" :on-infinite="infinite" :on-refresh="refresh" delegate-id="myScroller" class="my-scroller">
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text" v-for='item in testDataArr'>
                    <h4 class="weui-media-box__title">对{{item.Per}} 做的回访！</h4>
                    <p class="weui-media-box__desc">{{item.HfNote}}</p>
                </div>
            </div>
            <router-view></router-view>
        </scroller>
    </div>
</template>
<script>
import headTop from '@/components/header';
import weui from 'weui.js';
import {
    testData
} from '@/service/getData';
export default {
    data() {
        return {
            msg: "我是首页",
            testDataArr: [],
            postData: {
                pageIndex: 0
            },
            isRefresh: true
        }
    },
    mounted: function () {
        this.$nextTick(() => {
            var _self = this;
        });
    },
    methods: {
        refresh: function (done) {
            this.testDataArr = [];
            this.postData.pageIndex = 0;
            done();
        },
        infinite: function (done) {
            var _self = this;
            console.log("OK");
            this.getList().then(function (res) {
                if (res.length <= 0) {
                    setTimeout(() => done(true), 1500);
                    return;
                }
                setTimeout(() => {
                    console.log(res);
                    res.forEach(function (n, v) {
                        _self.testDataArr.push(n);
                    });
                    setTimeout(() => done(), 1500);
                }, 1500)
            });
        },
        actionSheet: function () {

        },
        async getList() {
            this.postData.pageIndex++;
            let res = await testData(this.postData.pageIndex);
            return res;
        }
    },
    components: {
        headTop
    }
}
</script>

<style>
.my-scroller .pull-to-refresh-layer .spinner-holder {}
.my-scroller .pull-to-refresh-layer {
    transition: all .15s linear;
    -webkit-transition: all .3s linear;
}
</style>
